$--dark--font--color: #ffffffb3;

$--dark--input--font--color: #ffffffcc;
$--dark--input--bg--color: #ffffff1f;
$--dark--input--border-color: #00526b;

$--dark--card-background--color: linear-gradient(90deg, #021428, #0B1F38);
$--dark--card-border--color: #186A99;

.dark-container{
  color: #fff;
  width: 100%;
  height: 100%;
  // overflow: auto;
  // overflow-x: scroll;
}


.dark-login-page{
  background: #03152b;
}


.dark-page{
  background-color: #00121c;

  ::-webkit-scrollbar-track{
    background: transparent;
  }

  .el-dialog__wrapper{
    .el-dialog{
      background-color: transparent;
      background-image: url("../../assets/images/main/dialog-bg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      
      .el-dialog__header {
        padding: 30px;
        padding-bottom: 10px;
        padding-top: 14px;
      }

      .el-dialog__title{
        color: #fff;
      }

      .el-dialog__headerbtn .el-dialog__close{
        color: #fff;
      }

      .el-dialog__body{
        color: #fff;
      }
    }
  }

  .el-card{
    background: $--dark--card-background--color;
    border: 1px solid $--dark--card-border--color;
    color: $--dark--font--color;

    .el-card__header,
    .list-group-item{
      border-bottom: 1px solid $--dark--card-border--color;
    }


  }

  .el-form-item__label{
    color:$--dark--font--color;
  }


  .el-upload-dragger,
  .vue-treeselect__control,
  .el-textarea__inner,
  .el-input__inner{
    color: $--dark--input--font--color;
    border: 1px solid $--dark--input--border-color;
    background-color: $--dark--input--bg--color;
  }

  .el-message-box{
    color:$--dark--font--color;
    border: 1px solid $--dark--input--border-color;
    background: $--dark--card-background--color;

    .el-message-box__content,
    .el-message-box__title{
      color: $--dark--font--color;
    }
  }

  .el-radio{
    color: $--dark--font--color;
  }

  .el-tabs__item{
    color: $--dark--font--color;

    &.is-active {
      color: #1890ff;
    }
  }

  .el-tree{
    background: linear-gradient(180deg, #00152154, #0089ad85, #00152154);
    color: #ffffffb3;
    border-left: 2px solid;
    border-right: 2px solid;
    border-image: linear-gradient(180deg, #001521, #0089ad, #001521) 1;

    &.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content,
    .el-tree-node__content:hover {
      background-color: transparent;
      border-top: 1px solid #0085a8;
      border-bottom: 1px solid #0085a8;
      box-shadow: inset 0px 0px 16px 0px #0085a8;
      color: #00ffff;
    }
  }

  .el-transfer-panel{
    color: $--dark--input--font--color;
    border: 1px solid $--dark--input--border-color;
    background-color: $--dark--input--bg--color;

    .el-transfer-panel__header{
      background: linear-gradient(180deg, #1f6f8c, transparent,  #1f6f8c);
      color: #00ccff;

     .el-checkbox  .el-checkbox__label{
       color: #00ccff;
     }
    }

  }

  .el-table{
    color: #ffffffb3;
    background-color: transparent;

    tr {
      background-color: transparent;
    }

    th.el-table__cell.is-leaf,
    td.el-table__cell {
      border-bottom: 1px solid #00333b;
    }

    &::before, .el-table--group::after, .el-table--border::after{
      background-color: #00333b;
    }

    .el-table__header-wrapper th,
    .el-table__fixed-header-wrapper th{
      background: linear-gradient(180deg, #1f6f8c, transparent,  #1f6f8c);
      color: #00ccff;
    }

    &.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
      background: linear-gradient(180deg, #1f6f8c, transparent, #1f6f8c);
    }
  }

  .el-button--text{
    color: #00ffff;
  }

  .el-checkbox__label{
    color: #00ccff;
  }
  .el-checkbox__inner {
    border: 1px solid #00ccff;
    background: linear-gradient(180deg, #001824, #00ccff90);

    &::after{
      border-width: 2px;
      border-color: #00ffff;
    }
  }

  .el-range-input{
    background: transparent;
  }

  .el-select-dropdown{
    background: linear-gradient(90deg, #021428, #0B1F38);
    border: 1px solid #186A99;
    color: #ffffffb3;

    .el-select-dropdown__item{
      color: #ffffffb3;
    }

    .el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
      background-color: transparent;
      border-top: 1px solid #0085a8;
      border-bottom: 1px solid #0085a8;
      box-shadow: inset 0px 0px 16px 0px #0085a8;
      color: #00ffff;
      line-height: 32px;
    }

  }

  .pagination-container{
    background-color: transparent !important;

    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .el-pager li {
      background-color: transparent;
      color: #00ccff;
      border: 1px solid #00526b;
    }

    .el-pagination.is-background .el-pager li:not(.disabled).active{
      background: linear-gradient(180deg, #001824, #00ccff90);
    }

    .el-pagination__jump,
    .el-pagination__total{
      color: #00ccff;
    }
  }

  .el-button:not(.el-button--text) {
    color: #ffffffb3;
    border-color: #00526b;
    background: linear-gradient(180deg, #004960, #001824);

    &:hover,&:focus{
      background: linear-gradient(180deg, #00ccff, #001824);
      border-color: #00ccff;
    }

    &.is-disabled{
      opacity: 0.5;
    }

    &.dark-btn{
      color: #00ccff;
      background-image: url("../../assets/images/btn-unselect.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      border: 0;
      background-color: transparent;

      &:hover,&:focus{
        background-image: url("../../assets/images/btn-selected.png");
        border: 0;
        background-color: transparent;
      }
    }
  }

  .el-date-editor{


    .el-range-input{
      color: #ffffffcc;
    }
  }


  .el-picker-panel{
    color:#ffffffb3;
    border: 1px solid #00526b;
    background: linear-gradient(90deg, #021428, #0B1F38);

    .el-date-range-picker__content.is-left{
      border-color: #00526b;
    }

    .el-date-table th{
      border-color: #00526b;
      color: #ffffffb3;
    }

    .el-date-table td.next-month,
    .el-date-table td.prev-month{
      color: #606266;
    }

    .el-picker-panel__icon-btn{
      color: #00ccff;
    }

    .el-date-table td.in-range div {
      background-color: #05b2c4;
    }
  }

  .el-popper[x-placement^=bottom] .popper__arrow{
    border-bottom-color: #00526b;
  }

  .el-popper[x-placement^=bottom] .popper__arrow::after{
    border-bottom-color: #00526b;
  }

  .el-loading-mask{
    background-color: #00526be6;
  }

  .el-dropdown-menu{
    background: $--dark--card-background--color;
    border: 1px solid $--dark--card-border--color;
    color: $--dark--font--color;

    .el-dropdown-menu__item--divided:before{
      background-color: $--dark--input--bg--color;
    }

    .el-dropdown-menu__item{
      color: $--dark--font--color;

      &:not(.is-disabled):hover, &:focus{
        background-color: transparent;
        //border-top: 1px solid #0085a8;
        //border-bottom: 1px solid #0085a8;
        box-shadow: inset 0px 0px 16px 0px #0085a8;
        color: #00ffff;
      }
    }

  }




  .header-info{
    width: 100%;
    height: 54px;
    border: 1px solid #00526b;
    background: linear-gradient(180deg, #004960, #001824);;

    .info-split{
      width: 1px;
      height: 70%;
      /*background-color: #00526b80;*/
      border-left: 1px dashed #00526b;
      margin: 0 5px;
    }

  }

  .btn-group-right{
    text-align: right;
    margin-bottom: 10px;
  }

  .tab-box{
    border: 1px solid #00526b;
    padding: 20px;
    box-shadow: inset 0px 0px 16px 0px #0085a8;
  }

  .el-menu--horizontal .el-menu .el-menu-item.is-active, .el-menu--horizontal .el-menu .el-submenu.is-active > .el-submenu__title{
    color: #fff;
  }
}
